<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>修改后台角色</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/comments.css" media="all">
    <link rel="stylesheet" href="css/eleTree.css">
    <style>
        .layui-form-label{
            width: 110px;
        }
        @media screen and (max-width: 450px){
            .layui-form-item .layui-input-inline {
                margin-left: 140px;
            }
        }
    </style>
</head>
<body>
    <div class="maincontainer">
        <blockquote class="layui-elem-quote">
            修改后台角色
            <button type="button" class="layui-btn layui-btn-sm" style="float: right;margin-top: -4px;" onclick="window.history.back();">返回</button>
        </blockquote>
        <form class="layui-form" action="" lay-filter="example">
            <div class="layui-form-item">
              <label class="layui-form-label">角色名称：</label>
              <div class="layui-input-inline">
                <input type="text" name="roleName" autocomplete="off" placeholder="请输入角色名称" class="layui-input" maxlength="20">
              </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态：</label>
                <div class="layui-input-block">
                    <input type="radio" name="openStatus" value="1" title="启用" checked="">
                    <input type="radio" name="openStatus" value="0" title="禁用">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色权限：</label>
                <div class="layui-input-inline">
                    <div class="eleTree ele1"></div>
                </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1">确认</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="window.history.back()">取消</button>
              </div>
            </div>
        </form>
    </div>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>

    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'form', 'eleTree'], function() {
        var http = layui.http,
            form = layui.form,
            eleTree = layui.eleTree;

        var id = http.getPid('id')
        var pList = []
         
        //用户权限
        var el = '';
        getPermission();
        function getPermission(){
            http.get('admin/role/listAllAuth',{},function(res){
                if(res.code == 200){
                    var data = res.data;
                    for(var i=0;i<data.length;i++){
                        if(data[i].children){
                            pList.push(Number(data[i].id))
                        }
                    }
                    el = eleTree.render({
                        elem: '.ele1',
                        data: data,
                        showCheckbox: true,
                        defaultExpandAll:true,
                        request: {     // 对后台返回的数据格式重新定义
                            name: "title",
                            key: "id",
                            children: "children",
                            checked: "checked",
                            disabled: "disabled",
                            isLeaf: "isLeaf"
                        }
                    });
                    // 角色详情
                    http.get('admin/role/findById',{
                        id: id
                    },function(res){
                        if(res.code == 200){
                            form.val('example', {
                                "roleName": res.data.roleName
                                ,"openStatus": res.data.openStatus
                            });
                            // let RemoveSame = [...new Set([...pList,...res.data.authIdList])]   // 并集 数组去重  
                            let SamePart=pList.filter(item=>res.data.authIdList.includes(item)) // 数组交集，或得两个数组重复的元素
                            let cList=res.data.authIdList.filter(item=>!SamePart.includes(item)) // 差集=并集-交集  去除两个数组相同的元素     
                            el.setChecked(cList,false);
                        }else{
                            layer.msg(res.msg)
                        }
                    })
                }
            });
        }

           
        
        //监听提交
        form.on('submit(demo1)', function(data){
            // console.log(data.field)
            if($.trim(data.field.roleName) == "") {
                layer.msg('请输入角色名称')
                return
            }
            
            var checkedList = el.getChecked(false, true);
            var permissionIds = [];
            if(checkedList.length == 0){
                layer.msg('请选择角色权限');
                return;
            }
            for(var i=0;i<checkedList.length;i++){
                permissionIds.push(checkedList[i].id);
            };
            url = 'admin/role/update'
            params = JSON.stringify({
                id: id,
                roleName: data.field.roleName,
                openStatus: data.field.openStatus,
                authIdList: permissionIds
            })
            http.postJSON(url,params,function(res){
                if(res.code == 200){
                    layer.msg('操作成功')
                    setTimeout(function(){
                        window.history.back()
                    },500)
                }else{
                    layer.msg(res.msg)
                }
            })
        });
    })
</script>
</body>
</html>